<template>
  <div class="wrapper">
    <com-header :title="title" :zDepth="0"></com-header>
    <div class="content">
      <div class="userInforTop">
        <div class="userAvatar">
          <mu-row justify-content="center">
            <mu-avatar :size="88" @click="handleShowGallary">
              <img :src="userInfo.userImg">
            </mu-avatar>
          </mu-row>
          <p class="userName">{{userInfo.userName}}</p>
        </div>
      </div>
      <div class="userInforMiddle">
        <mu-list toggle-nested>
          <mu-list-item button :ripple="false" nested :open="false">
            <mu-list-item-action>
              <mu-icon value="assignment_ind" color="teal500" size="26"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>个人资料</mu-list-item-title>
            <mu-list-item-action>
              <mu-icon class="toggle-icon" value="keyboard_arrow_down" color="grey400"></mu-icon>
            </mu-list-item-action>
            <mu-list-item button :ripple="false" slot="nested">
              <mu-list-item-title>
                <mu-row class="persion-file">
                  <mu-col span="2">性别:</mu-col><mu-col span="4">{{userInfo.sex}}</mu-col>
                  <mu-col span="2">年龄:</mu-col><mu-col span="4">{{userInfo.age}}</mu-col>
                </mu-row>
              </mu-list-item-title>
            </mu-list-item>
            <mu-list-item button :ripple="false" slot="nested">
              <mu-list-item-title>
                <mu-row class="persion-file">
                  <mu-col span="2">手机:</mu-col><mu-col span="8">{{userInfo.phoneNum}}</mu-col>
                </mu-row>
              </mu-list-item-title>
            </mu-list-item>
          </mu-list-item>
        </mu-list>
      </div>
      <div class="userInforBottom">
        <mu-list>
          <mu-list-item button :ripple="false">
            <mu-list-item-action><mu-icon value="lock_open" color="orange600" size="26"></mu-icon></mu-list-item-action>
            <mu-list-item-title>修改密码</mu-list-item-title>
            <mu-list-item-action><mu-icon value="chevron_right" color="grey400"></mu-icon></mu-list-item-action>
          </mu-list-item>
          <mu-divider inset></mu-divider>
          <mu-list-item button :ripple="false" to="/aboutUs">
            <mu-list-item-action><mu-icon value="help_outline" color="deepOrange400" size="26"></mu-icon></mu-list-item-action>
            <mu-list-item-title>关于我们</mu-list-item-title>
            <mu-list-item-action><mu-icon value="chevron_right" color="grey400"></mu-icon></mu-list-item-action>
          </mu-list-item>
          <mu-divider inset></mu-divider>
          <mu-list-item button :ripple="false" @click="handleLogout">
            <mu-list-item-action><mu-icon value="power_settings_new" color="redA400" size="26"></mu-icon></mu-list-item-action>
            <mu-list-item-title>退出登录</mu-list-item-title>
            <mu-list-item-action><mu-icon value="chevron_right" color="grey400"></mu-icon></mu-list-item-action>
          </mu-list-item>
          <mu-divider inset></mu-divider>
        </mu-list>
      </div>
    </div>
    <common-gallary
      :imgs="imgs"
      :showPagination="false"
      v-show="showGalary"
      @close="closeGallary"
    >
    </common-gallary>
  </div>
</template>

<script>
import ComHeader from '@/common/header/ComHeader'
import CommonGallary from '@/common/gallary/Gallary'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: 'Person',
  data () {
    return {
      title: '我的',
      userInfo: {
        userName: '',
        userImg: '',
        sex: '',
        age: 0,
        phoneNum: ''
      },
      imgs: [],
      showGalary: false
    }
  },
  components: {
    ComHeader,
    CommonGallary
  },
  computed: {
    ...mapState(['token'])
  },
  methods: {
    handleShowGallary () {
      this.showGalary = true
    },
    closeGallary () {
      this.showGalary = false
    },
    handleGetUserInfo () {
      axios.get('/api/userInfo.do', {params: {token: this.token}})
        .then(this.getUserInfoSucc)
    },
    getUserInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.userInfo = data
        this.imgs = []
        this.imgs.push(data.userImg)
      }
    },
    handleLogout () {
      this.$confirm('确定要退出登录？')
        .then(() => {
          this.$store.commit('logout')
          this.$router.push('/login')
        })
        .catch(() => {})
    }
  },
  activated () {
    this.handleGetUserInfo()
  }
}
</script>

<style lang="stylus" scoped>
  .content
    position: absolute
    top: 1.12rem
    left: 0
    right: 0
    bottom: 1.12rem
    .userInforTop
      overflow: hidden
      display: flex
      flex-direction: column
      justify-content: center
      height: 23vh
      background-image: -webkit-linear-gradient(top, rgba(33, 150, 243, 1), rgba(33, 150, 243, 0.66))
      .userName
        text-align: center
        line-height: .75rem
        color: #f2f2f2
        font-size: .32rem
    .userInforMiddle
      padding: .1rem 0
      .persion-file
        color: #757575
      .toggle-icon
        color: rgba( 0, 0, 0, .54)
        transition: transform .3s cubic-bezier(.23,1,.32,1)
      .mu-item__open
        .toggle-icon
          transform: rotate(180deg)
    .userInforBottom
      position: relative
      padding-top: .2rem
      &:before
        content: ' '
        height: .1rem
        background: #e4e4e4
        position: absolute
        left: 0
        right: 0
        top: 0
</style>
